import React, { Component } from "react";
import PropTypes from "prop-types"
import "./index.css";

export default class Item extends Component {

  static propTypes = {
    changeTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired
  }

  state = {
    isMouseEnter: false, //标识鼠标移入、移出
  };

  //勾选
  handleChange = (id, checked) => {
    const { changeTodo } = this.props;
    changeTodo(id);
  };

  handleMouse = (flag) => {
    return () => {
      this.setState({ isMouseEnter: flag });
    };
  };

  handleDel = (id) => {
    console.log({id});
    const { deleteTodo } = this.props; 
    deleteTodo(id);
  }

  render() {
    const { id, name, done } = this.props;
    const { isMouseEnter } = this.state;

    return (
      <li
        style={{ backgroundColor: isMouseEnter ? "#ddd" : "white" }}
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
      >
        <label>
          <input
            type="checkbox"
            checked={done}
            onChange={(e) => this.handleChange(id, e.target.checked)}
          />
          <span>{name}</span>
        </label>
        <button className="btn btn-danger" 
          style={{ display: isMouseEnter ? 'block' : "none " }}
          onClick={() => this.handleDel(id)}>
          删除
        </button>
      </li>
    );
  }
}
